<template>
  <div class="app-container">
    <!-- Agent信息 agent   ,Operator信息 operator ---------- -->
    <div>
      <!--顶部按钮栏  -->
      <!-- <el-row :gutter="10" class="mb8" v-if="isRole == 'operator'">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd">AddAgent
          </el-button>
        </el-col>
      </el-row> -->

      <el-row :gutter="10" class="mb8" v-if="isRole == 'agent'">
        <el-col :span="1.5">
          <!--  -->
          <el-button
            class="successbutton"
            v-if="!formBank.bankCard"
            type="primary"
            plain
            icon="el-icon-plus"
            size="medium"
            @click="handleAddBank"
            >AddAgent银行卡
          </el-button>
          <el-button
            class="successbutton"
            v-if="formBank.bankCard"
            type="primary"
            plain
            icon="el-icon-plus"
            size="medium"
            @click="handleUpdateBank"
            >修改Agent银行卡
          </el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="roleList"
        :highlight-current-row="true"
      >
        <el-table-column label="Agent姓名" align="center">
          <template slot-scope="scope">
            {{ scope.row.name ? scope.row.name : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="Agent账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.account ? scope.row.account : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="AgentID"
          prop="id"
          :show-overflow-tooltip="true"
          align="center"
        />
        <!-- <el-table-column label="Agent密码" align="center">
          <template slot-scope="scope">
            {{ scope.row.password ? scope.row.password : nulls }}
          </template>
        </el-table-column> -->
        <el-table-column label="Agent电话" align="center">
          <template slot-scope="scope">
            {{ scope.row.phone ? scope.row.phone : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.contacts ? scope.row.contacts : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="Agent地址"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.address ? scope.row.address : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="银行卡号"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.bankCard ? scope.row.bankCard : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="开户行地址"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.bankDeposit ? scope.row.bankDeposit : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="银行卡名"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.bankName ? scope.row.bankName : nulls }}
          </template>
        </el-table-column>
        <el-table-column
          label="银行预留Phone"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.bankPhone ? scope.row.bankPhone : nulls }}
          </template>
        </el-table-column>

        <el-table-column label="总收益(元)" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalRevenue ? scope.row.totalRevenue : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="Withdrawal Amount(元)" align="center">
          <template slot-scope="scope">
            {{ scope.row.withdrawMoney ? scope.row.withdrawMoney : 0 }}
          </template>
        </el-table-column>

        <el-table-column
          v-if="isRole == 'agent'"
          label="Operations"
          align="center"
          class-name="small-padding fixed-width"
          width="190"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >
              Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />

      <!-- Agent个人信息---Add或修改对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="650px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="Agent姓名" prop="name">
            <el-input
              style=" width: 80%"
              v-model="form.name"
              placeholder="Please InputAgent姓名"
            />
          </el-form-item>
          <el-form-item label="Agent账号" prop="account">
            <el-input
              style=" width: 80%"
              v-model="form.account"
              placeholder="Please InputAgent账号"
            />
          </el-form-item>
          <el-form-item label="AgentID" prop="id">
            <el-input
              style=" width: 80%"
              v-model="form.id"
              placeholder="Please InputAgentID"
            />
          </el-form-item>
          <el-form-item label="Agent密码" prop="password">
            <el-input
              style=" width: 80%"
              v-model="form.password"
              placeholder="Please InputAgent密码"
            />
          </el-form-item>
          <el-form-item label="Agent电话" prop="phone">
            <el-input
              style=" width: 80%"
              v-model="form.phone"
              placeholder="Please InputAgent电话"
            />
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input
              style=" width: 80%"
              v-model="form.contacts"
              placeholder="Please Input联系人"
            />
          </el-form-item>
          <el-form-item label="Agent地址" prop="address">
            <el-input
              style=" width: 80%"
              v-model="form.address"
              placeholder="Please InputAgent地址"
            />
          </el-form-item>
          <el-form-item label="总收益(元)" prop="totalRevenue">
            <el-input
              style=" width: 80%"
              v-model="form.totalRevenue"
              placeholder="Please Input总收益(元)"
            />
          </el-form-item>
          <el-form-item label="Withdrawal Amount(元)" prop="withdrawMoney">
            <el-input
              style=" width: 80%"
              v-model="form.withdrawMoney"
              placeholder="Please InputWithdrawal Amount(元)"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">Confirm</el-button>
          <el-button @click="cancel">Cancel</el-button>
        </div>
      </el-dialog>
      <!-- Agent银行卡信息----Add或修改对话框 -->
      <el-dialog
        :title="titleBank"
        :visible.sync="openBank"
        width="650px"
        append-to-body
      >
        <el-form
          ref="formBank"
          :model="formBank"
          :rules="rulesBank"
          label-width="150px"
        >
          <el-form-item label="AgentID" prop="id">
            <el-input
              style="width: 80%"
              type="text"
              min="1"
              v-model="formBank.id"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行Name" prop="bankName">
            <el-input
              style="width: 80%"
              type="text"
              min="1"
              v-model="formBank.bankName"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCard">
            <el-input
              style="width: 80%"
              type="text"
              min="1"
              v-model="formBank.bankCard"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bankDeposit">
            <el-input
              style="width: 80%"
              type="text"
              min="1"
              v-model="formBank.bankDeposit"
            ></el-input>
          </el-form-item>
          <el-form-item label="Phone" prop="bankPhone">
            <el-input
              style="width: 80%"
              type="text"
              min="1"
              v-model="formBank.bankPhone"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormBank">Confirm</el-button>
          <el-button @click="cancelBank">Cancel</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { delRole, webAgentDel, addRole, updateRole } from "@/api/system/role";

export default {
  name: "Role",
  data() {
    return {
      nulls: "--",
      // 遮罩层
      loading: false,

      // 总条数
      total: 0,
      // 角色表格Data
      roleList: [],
      // 弹出层标题
      title: "",
      titleBank: "",
      // 是否显示弹出层
      open: false,
      openBank: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      // 个人信息----表单参数
      form: {},
      // 银行卡---表单参数
      formBank: {
        id: "", //Agentid
        bankName: "", //银行卡Name
        bankCard: "", //银行卡号
        bankDeposit: "", //开户行
        bankPhone: "" //Phone
      },
      isformBank: false,

      // 个人信息----表单校验
      rules: {
        account: [
          { required: true, message: "Agent账号Cannot Empty", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "Agent电话Cannot Empty", trigger: "blur" },
          { min: 11, max: 11, message: "Phone为11位数", trigger: "blur" }
        ],
        address: [
          { required: true, message: "Agent地址Cannot Empty", trigger: "blur" }
        ]
      },
      // 银行卡信息----表单校验
      rulesBank: {
        id: [
          { required: true, message: "AgentIDCannot Empty", trigger: "blur" }
        ],
        bankName: [
          { required: true, message: "银行NameCannot Empty", trigger: "blur" }
        ],
        bankCard: [
          { required: true, message: "银行卡号Cannot Empty", trigger: "blur" },
          { min: 16, max: 19, message: "银行卡号为16至19位数", trigger: "blur" }
        ],
        bankDeposit: [
          { required: true, message: "开户行Cannot Empty", trigger: "blur" }
        ],
        bankPhone: [
          { required: true, message: "PhoneCannot Empty", trigger: "blur" },
          { min: 11, max: 11, message: "Phone为11位数", trigger: "blur" }
        ]
      },
      isRole: ""
    };
  },
  async created() {
    this.isRole = sessionStorage.role;

    await this.listFn();
  },
  methods: {
    // 表格基础信息
    async listFn() {
      if (this.isRole == "agent") {
        let res = await this.apis.webAgent(sessionStorage.optUserId);
        this.roleList = [res.data];
        this.formBank.bankCard = this.roleList[0].bankCard || "";
      } else {
        let res = await this.apis.agentOperatora(sessionStorage.optUserId);
        this.roleList = res.rows;
        this.total = res.total;
      }
    },
    // 个人信息---Cancel按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // Agent银行卡信息---Cancel按钮
    cancelBank() {
      this.openBank = false;
      this.resetBank();
    },

    // 表单Reset
    reset() {
      this.form = {
        name: undefined,
        account: undefined,
        id: undefined,
        password: undefined,
        phone: undefined,
        contacts: undefined,
        address: undefined,
        totalRevenue: undefined,
        withdrawMoney: undefined
      };
    },
    // 表单Reset
    resetBank() {
      this.formBank = {
        id: sessionStorage.optUserId || "",
        bankName: "",
        bankCard: "",
        bankDeposit: "",
        bankPhone: ""
      };
    },
    /**个人信息---- Add按钮Operations */
    async handleAdd() {
      this.reset();
      this.open = true;
      this.title = "AddAgent个人信息";
    },

    /**个人信息--- 修改按钮Operations */
    handleUpdate(row) {
      this.form = row;
      this.open = true;
      this.title = "修改Agent个人信息";
    },

    /**银行卡信息---- Add按钮Operations */
    async handleAddBank() {
      this.resetBank();
      this.isformBank = false;
      this.openBank = true;
      this.titleBank = "AddAgent银行卡信息";
    },

    /**银行卡信息--- 修改按钮Operations */
    handleUpdateBank() {
      this.isformBank = true;
      this.formBank.id = sessionStorage.optUserId || "";
      this.formBank.bankName = this.roleList[0].bankName || "";
      this.formBank.bankCard = this.roleList[0].bankCard || "";
      this.formBank.bankDeposit = this.roleList[0].bankDeposit || "";
      this.formBank.bankPhone = this.roleList[0].bankPhone || "";
      this.openBank = true;
      this.titleBank = "修改Agent银行卡信息";
    },

    /** 个人信息----Add、修改按钮的确认框 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.apis
            .webAgentUpdate(this.form)
            .then(res => {
              this.$message({
                message: "Operations Success",
                type: "success"
              });
            })
            .catch(err => {});

          setTimeout(() => {
            this.open = false;
          }, 500);
          setTimeout(() => {
            this.listFn();
          }, 1000);
        }
      });
    },
    /** Agent银行卡----Add、修改按钮的确认框 */
    submitFormBank() {
      this.$refs["formBank"].validate(valid => {
        if (valid) {
          if (this.isformBank) {
            this.apis
              .webAgentUpdateBank(this.formBank)
              .then(res => {
                this.$message({
                  message: "Operations Success",
                  type: "success"
                });
              })
              .catch(err => {});
          } else {
            this.apis
              .webAgentSaveBank(this.formBank)
              .then(res => {
                this.$message({
                  message: "Operations Success",
                  type: "success"
                });
              })
              .catch(err => {});
          }
          setTimeout(() => {
            this.openBank = false;
          }, 500);

          setTimeout(() => {
            this.listFn();
          }, 1000);
        }
      });
    },

    /** 个人信息----Delete按钮Operations */
    handleDelete(row) {
      console.log(222222, row);
      this.$confirm(
        "是否确认Delete" + row.name + ",(ID为：" + row.id + ")的个人基本信息？",
        "警告",
        {
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          type: "warning"
        }
      )
        .then(function() {
          return (
            webAgentDel(row.id),
            setTimeout(() => {
              history.go(0);
              this.listFn();
            }, 1000)
          );
        })
        .then(() => {
          this.msgSuccess("DeleteSuccess");
        });
    }
  }
};
</script>
<style>
.fenye {
  position: fixed;
  left: 20%;
  bottom: 4%;
}

.successbutton {
  background: #6bdb85 !important;
  border-color: #6bdb85 !important;
  color: #fff !important;
}

.successbutton:hover {
  background: #439ef9 !important;
  border-color: #439ef9 !important;
}
</style>
